<template>
  <div>
     
    <div>
      <div class="page-header col-xs-offset-2 col-xs-8">
        <h2>Vue路由测试</h2>
        <button @click="backHandler">back:返回</button>
        <button @click="goHandler">go:去</button>
      </div>
      <!-- 导航区域 -->
      <div class="col-xs-2 col-xs-offset-2">
        <!-- 导航链接:可以设置K的数值,导航链接通过【vue-router插件提供的】全局组件router-link实现-->
        <!-- 导航链接：务必要有to属性 -->
        <router-link class="list-group-item" to="/about">About</router-link>
        <router-link class="list-group-item" to="/home">Home</router-link>
      </div>
      <!-- 展示区:展示的内容 home|about路由组件-->
      <!-- 路由组件出口的地方:路由组件在哪里展示 -->
      <!-- 
        展示区域:展示路由组件的区域（地方）,router-view,它也是Vue-router提供的一个全局组件
        它的作用是:路由组件的出口的地方的设置，说白了,就是路由组件在哪里展会
      -->
      <!-- 路由组件的出口地方:home|about -->
      <!-- include:指名字道姓缓存那几个路由组件,别忘记给路由组件起名字 -->
       <keep-alive :include="['home','about']">
          <router-view></router-view>
       </keep-alive>
    </div>
  </div>
</template>

<script>

export default {
  name: "",
  mounted() {
    //VC身上的$router实质就是VueRouter类的实例!!!
    console.log('App根组件---$router',this.$router);
    console.log("App根组件---$route",this.$route);
  },
  methods: {
    //后退
    backHandler(){
      //回退一步:这个API实质并非为了PC端,移动端!!!!
      this.$router.back();
    }
    ,
    goHandler(){
      //前进或者后退N步.负数代表回退  正数代表前进
      this.$router.go(2);
    }

  }
};
</script>

<style scoped>
 /*项目当中引入bootstrap这个样式:导致咱们这样有权重问题*/
 .router-link-active{
    background:skyblue !important; 
    color: white !important;
 }
</style>
